<template>
    <ul class='article-sort fx'>
        <li class="item" v-for='(item, i) in articleSortData' :key='item'>
            <a href="" :class="{active: activeIndex === i}">{{item}}</a>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'ArticleSort',
        data() {
            return {
                articleSortData: ['热门', '最新', '热榜'],
                activeIndex: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
.article-sort {

    padding: 1.5rem 1rem; 
    border-bottom: 1px solid #eaeaea;
    .item {
        padding: 0 1rem;
        border-right: 1px solid #eaeaea;
        a {
            font-size: 1.4rem;
        }
        & a.active {
            color: #007fff;
        }
        &:last-child {
            border: none;
        }
    }

}
</style>